<template>
	<view class="wrap">
		<view class="form">
			<uni-forms :modelValue="form" :rules="rules" label-position="top">
				<uni-forms-item label="跟进阶段" name="followStage">
						<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item required  label="备注" >
						<textarea placeholder='请填写备注' v-model="form.followRemark" style="width: 100%;height: 260rpx;background-color: #f7f7f7;padding: 10rpx;" ></textarea>
				</uni-forms-item>
				<uni-forms-item label="客户意向度" name="customerIntention">
						<uni-data-checkbox v-model="value1" :localdata="range1" @change="change1"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="是否成交" name="name">
						<uni-data-checkbox v-model="value2" :localdata="range2" @change="change2"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="上传图片" name="name">
						<view class="right">
							 <view class="" v-for="(item,index) in imagelist" :key="index" style="margin-right: 10rpx;">
							 	<image  :showLoading="true" :src="item.imageUrl" style="width: 100rpx;height: 100rpx; border-radius: 10rpx;"></image>
							 </view>
							<!-- <uni-icons v-if="imagelist.length==0" type="right" size="30rpx" @click="chooseimage"></uni-icons> -->
							<view  style="width: 100rpx;height: 100rpx;background-color: #f4f5f7;text-align: center;line-height: 100rpx;">
								<uni-icons type="plusempty" size="70rpx" color="#d3d4d6" @click="chooseimage"></uni-icons>
							</view>
						</view>
				</uni-forms-item>
			</uni-forms>
		
		
		</view>
		<view class="btn">
			<view class="btnt" @click="submit">
				提交
			</view>
		</view>
		<view class="" style="padding-bottom: 50%;">
			
		</view>
		<!-- <u-select v-model="show" :list="followlist" @confirm="choosefollow"></u-select> -->
	</view>
</template>

<script>
	import {
	  	mapState,
	  } from 'vuex';
	 import uniForms from "../uni-forms/components/uni-forms/uni-forms.vue"
	 import uniFormsItem from "../uni-forms/components/uni-forms-item/uni-forms-item.vue"
	 import uniDataCheckbox from "../uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue"
	export default {
		components:{
			uniForms,
			uniFormsItem,
			uniDataCheckbox
		},
		data() {
			return {
				form:{
					followStage:'0',
					customerIntention:'2',
					dealOrNot:'1',
					customerId:'',
					picture:'',
					followRemark:'',
					 
				},
				intentions:[],//意向度
				value:'',
				value1:'',
				isbargain:[],//是否成交,
				followlist:[],//跟进阶段
				show:false,
				checked:false,
				// action:"http://101.132.175.    89:9999/admin/sys-file/upload",
				fileList:[],
				
				token:null,
				imagelist:[],
				rules:[
					
				],
				value: 0,
				value1:3,
				value2:1,
				range: [{"value": 0,"text": "初步沟通"	},{"value": 1,"text": "确定意向"},{"value": 2,"text": "等待付款"}],
				range1: [{"value": 0,"text": "高"	},{"value": 1,"text": "中"},{"value": 2,"text": "低"},{"value": 3,"text": "无"}],
				range2: [{"value": 0,"text": "已成交"	},{"value": 1,"text": "未成交"}]
				
			};
		},
		onLoad(e) {
			console.log(e);
			this.form.customerId=e.id
			this.form.createTime=this.timechange(new Date())
			console.log(this.timechange(new Date()));
			// this.getintions()
			// this.token=this.$store.state.vuex_token
		},
		computed:{
		...mapState(['userInfo']),
				},
				computed: {
					...mapState(['hasLogin', 'userInfo', 'userCenterData'])
				},
		methods:{
			change(e){
					
				this.form.followStage=e.detail.value
						},
			change1(e){
							
				this.form.customerIntention=e.detail.value
								},
			change2(e){
											
					this.form.dealOrNot=e.detail.value
							},
			//获取意向度/是否成交
			getintions(){
				this.$u.api.dictData({dictType:'instion'}).then(res=>{
					this.intentions=res.data
				})
				this.$u.api.dictData({dictType:'isbargain'}).then(res=>{
					this.isbargain=res.data
				})
				this.$u.api.dictData({dictType:'customer_fllow'}).then(res=>{
					this.followlist=res.data
				})
			},
			// 跟进阶段确认
			choosefollow(val){
				 
				this.form.followStageName=val[0].label
				this.form.followStage=val[0].value
			},
			// 意向
			changeintent(val){
			 
				this.form.customerIntention=val
			},
			changebar(val){
				this.form.dealOrNot=val
			},
			// 提交表单:
			submit(){
				if(this.imagelist.length!=0){
					this.form.picture=this.imagelist[0].imageUrl
				}
				if(this.form.followRemark==''){
					uni.showToast({
						icon:'none',
						title:'请填写跟进备注'
					})
					return
				}
				this.form.createBy=this.userCenterData.memberName
				this.$request({
					url:'v3/customer/front/appCustomerFollowRecord',
					method:'POST',
					header:{
									  'Content-Type': 'application/json'
					},
					data:this.form
					
				}).then(res=>{
					uni.showToast({
						title:"添加成功",
						icon:'none'
					}),
					uni.navigateBack({delta:1})
				})
				
			},
			chooseimage(){
				if(this.imagelist.length==3){
					uni.showToast({
						icon:'none',
						title:"最多上传三张图片"
					})
				}else{
					let that = this;
									let key = uni.getStorageSync('token');
									uni.chooseImage({
										count: 1,
										sizeType: ['original', 'compressed'],
										//可选择原图或压缩后的图片
										sourceType: ['album', 'camera'],
										//可选择性开放访问相册、相机
										success: res => {
											uni.uploadFile({
												url: getApp().globalData.apiUrl + 'v3/oss/front/upload',
												filePath: res.tempFilePaths[0],
												name: 'file',
												formData: {
													'source': 'goods',
												},
					header: {
					    Authorization:  'Bearer '+that.userInfo.access_token
					 },
												success: resup => {
													// #ifndef MP-ALIPAY||MP-BAIDU
													resup = JSON.parse(resup.data);
													// #endif
													// #ifdef MP-ALIPAY||MP-BAIDU
													resup = resup.data
													// #endif
					
													if (resup.state == 200) {
														// //获取到image-cropper实例
														console.log(resup.data);
														this.imagelist.push({imageUrl:resup.data.url,type:'image'})
														// that.cover = resup.data;
														// that.cover.video_path = resup.data.path;
														// that.cover.video_url = resup.data.url;
														// that.cover.height = resup.data.height;
														// that.cover.width = resup.data.width
													}
												}
											});
										}
									});
				}
				
			},
			timechange(time){
				 //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				  var date = new Date(time);
				  var Y = date.getFullYear() + '-';
				  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth()+1) : date.getMonth() + 1) + '-';
				  var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
				  var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
				  var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes())+ ':';
				  var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
				  return  Y + M + D + h + m + s;
			},
			noimage(){
				uni.showToast({
					icon:'none',
					title:"请上传图片"
				})
			},
			 
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 750rpx;
		margin: 0 auto;
		background: #F5F5F5;
	}
.wrap{
	background-color: #fff;
	color: #282828;
	font-family: PingFang-SC-Regular;
	.form{
		background-color: #fff;
		padding: 0 30rpx;
		.right{
			display: flex;
			align-items: center;
		}
		 /deep/.u-add-wrap{
			  
			 width: 80rpx !important;
			 height: 80rpx !important;
			 .u-add-tips{
				display: none
				 
			 }
			 .u-icon__icon {
				 font-size: 40rpx !important;
			 }
		 }
	}
	.btn{
		width: 100%;
		height: 140rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0rpx;
		z-index: 999;
	
		.btnt{
			width: 464rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background-color: #f22c38;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
			margin-left: 143rpx;
			margin-top: 30rpx;
		}
	}
}
</style>
